<template>
	<view class="page_box">
		<view class="head-box">
			<!-- 标题栏 -->
			<shopro-navbar back-icon-color="#121516">
				<view class="u-flex-1 u-flex u-col-center u-m-x-20" slot="content">
					<!-- @change="onSearch" -->
					<u-search placeholder="搜索订单" @search="onSearch" @clear="clearSearch" v-model="searchVal"
						:showAction="false" height="60"></u-search>
				</view>
			</shopro-navbar>
			<!-- 筛选栏 -->
			<sh-filter @change="onFilter"></sh-filter>
		</view>

		<view class="head_box">
			<!-- tab -->
			<view class="order-nav u-flex">
				<view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id"
					@tap="onNav(nav.type)">
					<view class="item-title">{{ nav.title }}</view>
					<text class="nav-line" :class="{ 'line-active': orderType === nav.type }"></text>
				</view>
			</view>
		</view>

		<view class="content_box">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<!-- 订单列表 -->
				<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id">
					<view @tap.stop="jump('/pages/app/merchant/detail', { orderId: order.id })">
						<view class="order-head">
							<!-- <text class="no">订单编号：{{ order.order_sn }}</text> -->
							<view class="">
								<text class="state">{{ order.status_name }}</text>
								取衣时间
							</view>
							<view class="">
								<!-- {{ order.remark || '未确定' }} -->
								{{ $u.timeFormat(order.yuyue_time, 'yyyy-mm-dd hh:MM') }}
							</view>
							<!-- <te
							<!-- <text class="no">下单时间：{{ $u.timeFormat(order.createtime, 'yyyy-mm-dd hh:MM') }}</text> -->
						</view>
						<view class="x-f" style="background: #F7F7F7;border-radius: 10rpx;margin-top: 25rpx;padding: 25rpx 0 25rpx 25rpx;
						justify-content: space-between;align-items: flex-start;">
							<!-- <text class="no">订单编号：{{ order.order_sn }}</text> -->
							<view class="x-f" style="align-items: flex-start;">
								<view class="qu">取</view>
								<view class="address" style="">
									{{order.province_name+order.city_name+order.area_name+order.address ? order.province_name+order.city_name+order.area_name+order.address : ''}}
									<view class="phone_name" style="">
										{{order.consignee}}
										<span style="margin-left: 30rpx;">
											{{order.phone}}
										</span>
									</view>
								</view>
							</view>
							<view class="bohao x-f" @tap.stop="onService(order.phone)">
								<image src="../../../static/imgs/dh.png" style="margin-right: 8rpx;"></image>
								一键拨号
							</view>
							<!-- <text class="no">下单时间：{{ $u.timeFormat(order.createtime, 'yyyy-mm-dd hh:MM') }}</text> -->
						</view>
						<view class="goods-order" v-for="goods in order.item" :key="goods.id">
							<view class="order-content">
								<shopro-mini-card :title="goods.goods_title" :image="goods.goods_image">
									<template #describe>
										<view class="order-sku u-ellipsis-1">
											<text class="order-num">数量:{{ goods.goods_num || 0 }};</text>
											{{ goods.goods_sku_text ? goods.goods_sku_text : '' }}
										</view>
									</template>
									<template #cardBottom>
										<view class="order-price-box u-flex ">
											<text class="order-price font-OPPOSANS">￥{{ goods.goods_price || 0 }}</text>
											<button class="u-reset-button status-btn"
												v-if="goods.status_name">{{ goods.status_name }}</button>
										</view>
									</template>
								</shopro-mini-card>
							</view>
						</view>
					</view>
					<view class="d x-f" v-if="order.receive_status == 0" @click="order_id = order.id"
						style="justify-content: space-between;align-items: center;padding-bottom: 0rpx;">
						<picker @change="bindendtimeChange" :range="peisongyuan" range-key="nickname">
							<view class="" style="width: 700rpx;height: 86rpx;line-height: 86rpx;background: #0099E5;border-radius: 43rpx;text-align: center;
font-size: 32rpx;font-family: Source Han Sans CN;font-weight: 500;color: #FFFFFF;">
								指派取衣员
							</view>
						</picker>
					</view>
				</view>

				<!-- 空白页 -->
				<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
					tipText="暂无订单~"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isEmpty: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				searchVal: '',
				orderType: 'noput',
				orderList: [],
				order_id: 0,
				peisongyuan: [],
				orderState: [
					// {
					// 	id: 0,
					// 	title: '全部',
					// 	type: 'all'
					// },
					{
						id: 1,
						title: '待指派',
						type: 'noput'
					},
					{
						id: 2,
						title: '待取衣',
						type: 'puts'
					},
					{
						id: 6,
						title: '待收衣',
						type: 'yiqu'
					},
					{
						id: 3,
						title: '已收衣',
						type: 'yishou'
					},
					{
						id: 4,
						title: '清洗中',
						type: 'nosend'
					},
					{
						id: 5,
						title: '待送回',
						type: 'noget'
					},
					// {
					// 	id: 4,
					// 	title: '已送回',
					// 	type: 'finish'
					// }
				]
			};
		},
		onShow() {
			if (this.$Route.query.type) {
				this.orderType = this.$Route.query.type;
			}
			this.orderList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.getOrderList();
		},
		methods: {
			bindendtimeChange(e) {
				var that = this;
				console.log(e);
				console.log(that.peisongyuan);
				var i = 0;
				for (let key in that.peisongyuan) {
					if (i == e.detail.value) {
						that.$http('store.orderDetail', {
							id: that.order_id,
							store_id: uni.getStorageSync('storeId'),
							send_user_id: that.peisongyuan[key].id
						}).then(res => {
							if (res.code === 1) {
								that.onNav(that.orderType, true)
							}
							if (res.msg) {
								that.$u.toast(res.msg);
							}
						});
					}
					i++;
				}
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 跳转客服
			onService(phone) {
				this.$tools.callPhone(phone);
			},
			// tab切换
			onNav(id, shuaxin = false) {
				if (this.orderType !== id || shuaxin) {
					this.orderType = id;
					this.orderList = [];
					this.currentPage = 1;
					this.lastPage = 1;
					this.getOrderList();
				}
			},
			onSearch(id, shuaxin = false) {
				this.onNav(this.orderType, true)
			},
			// 清除搜索框
			clearSearch() {
				this.searchVal = '';
				this.onNav(this.orderType, true)
			},
			// 订单列表
			getOrderList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('store.order', {
					date_type: 'all',
					searchVal: that.searchVal,
					type: that.orderType,
					page: that.currentPage
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.result.data];
						that.isEmpty = !that.orderList.length;
						that.orderInfo = res.data;
						that.lastPage = res.data.result.last_page;
						that.loadStatus = that.currentPage < res.data.result.last_page ? 'loadmore' : 'nomore';
						that.peisongyuan = res.data.peisongyuan;
					}
				});
			},

			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getOrderList();
				}
			},

			// 删除订单
			onDelete(orderId, orderIndex) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定要删除这个订单么？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							that.$http('order.deleteOrder', {
									id: orderId
								},
								'删除中...'
							).then(res => {
								if (res.code === 1) {
									that.$u.toast(res.msg);
									that.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});
			},

			// 取消订单
			onCancel(id, orderIndex) {
				let that = this;
				that.$http('order.cancel', {
						id: id
					},
					'取消中...'
				).then(res => {
					if (res.code === 1) {
						that.$u.toast(res.msg);
						this.orderList.splice(orderIndex, 1);
					}
				});
			},

			// 立即购买
			onPay(id) {
				uni.navigateTo({
					url: `/pages/order/payment/method?orderId=${id}&orderType=goods`
				});
			},

			// 查看物流
			onExpress(orderId) {
				let that = this;
				that.$http('order.expressList', {
					order_id: orderId
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length == 1) {
							this.jump('/pages/order/express/express-detail', {
								orderId: orderId,
								expressId: res
									.data[0].id
							});
						} else if (res.data.length > 1) {
							this.jump('/pages/order/express/express-list', {
								orderId: orderId
							});
						} else {
							that.$u.toast('暂无包裹~');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.order-nav {
		background: #fff;
		height: 80rpx;

		.nav-item {
			flex: 1;

			.item-title {
				font-size: 30rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 76rpx;
			}

			.nav-line {
				width: 100rpx;
				height: 4rpx;
				background: #fff;
			}

			.line-active {
				background: #0099E5;
				width: 28rpx;
				height: 7rpx;
				background: #0099E5;
				border-radius: 4rpx;
			}
		}
	}

	.order-list {
		background: #fff;
		margin: 20rpx 0;
		margin: 20rpx 0 30rpx 0;
		padding: 25rpx 25rpx;

		.d {
			padding-bottom: 20rpx;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;

			.btn-box {
				justify-content: flex-end;
			}

			.all-msg {
				font-size: 24rpx;
				color: #999;
				justify-content: flex-end;
				margin-bottom: 10rpx;
				padding: 0 30rpx;

				.all-unit {
					font-size: 20rpx;
				}

				.all-money {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;

					&::before {
						content: '￥';
						font-size: 20rpx;
					}
				}
			}

			.obtn1 {
				width: 160rpx;
				line-height: 60rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 30rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}

			.obtn2 {
				width: 160rpx;
				line-height: 60rpx;
				background: linear-gradient(90deg, #0099E5, #0099E5);
				box-shadow: 0px 7rpx 6rpx 0px rgba(0, 153, 229, 0.22);
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;

				font-weight: 400;
				color: #fff;
				padding: 0;
			}

			.obtn3 {
				background: #ffeeee;
				color: #e50808;
				width: 160rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				padding: 0;
			}
		}

		.qu {
			min-width: 48rpx;
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			background-color: #0099E5;
			text-align: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 48rpx;
			margin-right: 14rpx;
		}

		.address {
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			line-height: 42rpx;
		}

		.phone_name {
			margin-top: 32rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}

		.bohao {
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 70rpx;
			min-width: 190rpx;
			height: 70rpx;
			background: linear-gradient(-10deg, #0099E5, #2987F5, #5BBCF8);
			box-shadow: 2rpx 2rpx 9rpx 0rpx rgba(39, 120, 216, 0.53);
			border-radius: 35rpx 0rpx 0rpx 35rpx;
			justify-content: center;

			image {
				width: 37rpx;
				height: 37rpx;
			}
		}

		.order-head {
			text-align: center;
			padding: 10rpx 25rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #888888;
			// height: 77rpx;
			// bd: 1rpx solid #dfdfdf;

			.no {
				font-size: 26rpx;
				color: #999;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #888888;
			}

			.state {
				font-size: 26rpx;
				color: #0099E5;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #0099E5;
				margin-right: 20rpx;
			}
		}

		.goods-order {
			bd: 1px solid rgba(223, 223, 223, 0.5);
			padding: 20rpx 20rpx 0;
			margin-bottom: 20rpx;

			.order-content {
				padding-bottom: 20rpx;

				.order-sku {
					font-size: 24rpx;

					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					width: 450rpx;
					margin-bottom: 20rpx;

					.order-num {
						margin-right: 10rpx;
					}
				}

				.order-price-box {
					.status-btn {
						height: 32rpx;
						border: 1rpx solid #0099E5;
						border-radius: 15rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #0099E5;
						padding: 0 10rpx;
						margin-left: 20rpx;
						background: rgba(0, 153, 229, 0.16);
					}

					.order-price {
						font-size: 26rpx;

						font-weight: 600;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}
	}
</style>